CSS 連結的屬性

• 四個連結的狀態

a:link {color: red;} 正常，尚未被點擊過的連結
a:visited {color: green;} 用戶點擊過的連結
a:hover {color: hotpink;} 滑鼠停在標籤上會出現的連結
a:active {color: blue;} 點擊時會出現的連結

• 一個標籤有多種連結狀態是，必須按照以下的順序
  • a:hover 必須在 a:link 和 a:visited 之後
  • a:active 必須在 a:hover 之後
• text-decoration屬性主要用於刪除連結的下劃線

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}

• background-color 指定連結的背景顏色
• 結合padding將<a>標籤向外推，再結合以上屬性變成可點擊的按鈕

CSS游標樣式

CSS列表樣式

• list-style-type 可以改變列表項標記

ul.a {list-style-type: circle;} 空心圓形
ul.b {list-style-type: square; 實心方形
ol.c {list-style-type: upper-roman;} 羅馬字母
ol.d {list-style-type: lower-alpha;} 小寫英文

• list-style-image: url('sqpurple.gif'); 使用圖片替換列表項
• 調整列表項、和內容的排版關係

ul.a {list-style-position: outside;}
ul.b {ist-style-position: inside;}

• 刪除列表的列表項、預設排版方式

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

• 列表的速記屬性，需依照以下順序寫
  list-style-type（如果指定了list-style-image，如果由於某種原因無法顯示圖像，將顯示該屬性的值）
  list-style-position
list-style-image（將圖像指定為列表項標記）

ul {
  list-style: square inside url("sqpurple.gif");
}

CSS表格樣式

• 表格設定線條粗細、線條樣式(實心)
  • 可調整選擇的標籤，來調整表格樣式

table, th, td {
  border: 1px solid;
}

• 使用width: 100%讓表格隨著螢幕縮放

table {
  width: 100%;
}

• border-collapse: collapse; 將邊框預設的雙框改成單邊框
• text-align: center; 表格內容置中